<template>
  <ul v-show="!route.meta.hidden">
    <li v-for="item in menuList" :key="item.key" :class="{active:currentIndex==item.id}"
      @click="changeStatus(item.title,item.id)">
      <span class="icon-class">
        <component :is="item.icon" />
      </span>
      {{item.title}}
      <!-- {{ item.id === 2 ? '' : item.title }} -->
    </li>
  </ul>
</template>
<script setup lang="ts">
    import { ref, onMounted, watch } from 'vue'
    // import { Setting, User, Document, OfficeBuilding } from '@element-plus/icons-vue'
    import { useRouter, useRoute } from 'vue-router'
    import { useStore } from 'vuex'
    import { getMenu } from '@/api/user/index'
    import {IMenuResponse} from '@/types/index'
    const route = useRoute()
    const menuList:any = ref([])
    onMounted(async () => {
        const res:IMenuResponse = await getMenu()
            menuList.value = res.data.result
            menuList.value.forEach((item:any) => {
                if (item.id == 0) {
                    item.icon = "User"
                } else if (item.id == 1) {
                    item.icon = "Document"
                }
                else if (item.id == 2) {
                    item.icon = "View"
                }
                else if (item.id == 3){
                    item.icon = "Setting"
                }else{
                    item.icon ="Open"
                }
            })
        })
    const store = useStore()
    const router = useRouter()
    const currentIndex = ref(0)
    const changeStatus = (value:string, id:number) => {
        if (id == 0) {
            router.push('/patientManage')
        } else if (id == 1) {
            router.push('/eyeTrackingRecord')
        }
        else if (id == 2) {
            router.push('/eyeTrackingView')
        }
        else  if(id==3){
            router.push('/systemSettings')
        }else{
            router.push('/accessControl')
        }
            store.commit('updateTitle', value)
            store.commit('updateMenuIndex', id)
            currentIndex.value = store.state.menuIndex
    }
    onMounted(() => {
        currentIndex.value = store.state.menuIndex
    })
    watch(() => route.path,
          () => {
              if (route.path == '/' || route.path == '/patientManage') {
                  currentIndex.value = 0
                  store.commit('updateMenuIndex', 0)
              } else if (route.path == '/eyeTrackingRecord') {
                  currentIndex.value = 1
                  store.commit('updateMenuIndex', 1)
              }else if (route.path == '/eyeTrackingView') {
                  currentIndex.value = 2
                  store.commit('updateMenuIndex', 2)
              }
               else if (route.path == '/systemSettings') {
                  currentIndex.value = 3
                  store.commit('updateMenuIndex', 3)
              } else if (route.path == '/accessControl') {
                  currentIndex.value = 4
                  store.commit('updateMenuIndex', 4)
              }else{

              }
          },
          { deep: true }
          )
</script>
<style lang="scss" scoped>
  ul li {
    list-style-type: none;
    float: left;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    width: 100%;
    font-size: 20px;
    cursor: pointer;
    text-align: left;
    padding-left:30px;

    .icon-class {
      box-sizing: border-box;  
      display: inline-block;
      width: 20px;
      height: 20px;
      vertical-align: top;
      margin-right:10px;
    }
  }
  @media screen and (max-width:1080px){
    ul li{
        font-size: 16px;
    }
    
  }
  
  .active {
    color: #3156f5;
    background-image: url(../../assets/img/active.png);
  }
</style>